<template>
    <div class="container">
        <div class="wrapper">

            <aside v-if="$store.state.sideBarShow" class="side-bar">
                <ul class="side-bar-list">
                    <li :class="{active:item.active}" :key="item.name" @click="goPage(item.toRouter,item.query?item.query:{})" v-for="item in sideBarMenu">
                        {{item.name}}
                    </li>
                </ul>
            </aside>
            <nuxt/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "personal",
        data(){
            return {
                sideBarMenu:[
                    {
                        name:'首页',
                        router:['index'],
                        toRouter:'/',
                        active: false
                    },
                    {
                        name:'个人信息',
                        router:['personal-info'],
                        toRouter:'info',
                        active:false
                    },
                    {
                        name:'我的订阅',
                        router:['search'],
                        toRouter:'/search/subscribe',
                        active:false
                    },
                    {
                        name:'我的收藏',
                        router:['search'],
                        toRouter:'/search/collect',
                        active:false
                    },
                    {
                        name:'我的订单',
                        router:['personal-orders','personal-order-detail','personal-order','personal-pay','personal-pay-done'],
                        toRouter:'orders',
                        active:false
                    },
                    {
                        name:'我的发票',
                        router:['personal-invoices', 'personal-invoice-detail'],
                        toRouter:'invoices',
                        active:false
                    },
                    {
                        name:'消息中心',
                        router:['personal-messages','personal-message-detail'],
                        toRouter:'messages',
                        active:false
                    },
                    {
                        name:'帮助中心',
                        router:['personal-help','personal-help-detail'],
                        toRouter:'help',
                        active:false
                    },
                ]
            }
        },
        watch:{
            '$route'(to) {
                this.sideBarMenu.forEach(item=>{
                    item.active = false;
                    item.router.forEach(item2=>{
                        if(to.name == item2){
                            item.active = true;
                        }
                    })

                });
            }
        },
        mounted() {
            this.sideBarMenu.forEach(item=>{
                item.active = false;
                item.router.forEach(item2=>{
                    
                    if(this.$route.name == item2){
                        item.active = true;
                    }
                })

            });
        },
        methods:{
            goPage(router,query={}){
                this.$router.push({
                    path:router,
                    query
                })
            },
        }
    }
</script>

<style scoped lang="less">
.container{
    width: 100%;
    min-width: 1200px;
    background-color: #F5F5FB;
    font-family:"Microsoft YaHei", "微软雅黑";
    .wrapper{
        .width(1200px);
        .center(auto-x);
        padding: 23px 0 76px;
        .clearfix;
        aside{
            .width(240px);
            .fz(17px);
            font-weight:400;
            .color(#252627);
            .fl;
            ul.side-bar-list{
                .width;
                background-color: #ffffff;

                &>li{
                    .width;
                    .lh(60px);
                    .bg-for(8,'public_icon-sidebar-','png');
                    background-size: auto !important;
                    background-position: 55px center !important;
                    padding-left: 80px;
                    background-color: #FFFFFF;

                    &:nth-of-type(1){
                        letter-spacing: 5px;
                    }
                    &:hover{
                        cursor: pointer;
                        text-decoration: underline;
                    }

                    &.active{
                        background-color: @main-color;
                        .color(#FFFFFF);
                        &:nth-of-type(2){
                            background-image: url("@{img-base-url}public_icon-sidebar-active-2.png");
                        }
                        &:nth-of-type(5){
                            background-image: url("@{img-base-url}public_icon-sidebar-active-5.png");
                        }
                        &:nth-of-type(6){
                            background-image: url("@{img-base-url}public_icon-sidebar-active-6.png");
                        }
                        &:nth-of-type(7){
                            background-image: url("@{img-base-url}public_icon-sidebar-active-7.png");
                        }
                        &:nth-of-type(8){
                            background-image: url("@{img-base-url}public_icon-sidebar-active-8.png");
                        }
                    }
                }
            }

            &+div{
                .width(940px);
                .fr;
            }
        }
    }

}

</style>
<style lang="less">

    ul.step-bar{
        .width;
        .clearfix;
        .bg('@{img-base-url}order_step-1.png');
        margin-top: 10px;
        &>li{
            .fl;
            .lh(52px);
            .width(33.333%);
            text-align: center;
            .color(#444444);
            .fz(18px);
            span{
                vertical-align: middle;
                margin-left: 11px;
            }
            &:nth-of-type(1){
                i{
                    .size(20px,24px);
                    .bg('@{img-base-url}order_icon-dingdan.png');
                }

            }
            &:nth-of-type(2){
                i{
                    .size(30px,23px);
                    .bg('@{img-base-url}order_icon-pay.png');
                }
                &.active i{
                    .bg('@{img-base-url}order_icon-pay-active.png');
                }

            }
            &:nth-of-type(3){
                i{
                    .size(23px,23px);
                    .bg('@{img-base-url}order_icon-success.png');
                }
                &.active i{
                    .bg('@{img-base-url}order_icon-success-active.png');
                }
            }

            &.active{
                .color(#ffffff);
            }
        }
    }
    @moudle-bg-color:#ffffff;
    .page-title{
        .fz(16px);
        .color(#252627);
        .lh(58px);
        padding-left: 20px;
        background-color: @moudle-bg-color;
    }
</style>